@charset "utf-8";
@function n($px) {
    @return $px/2;
}
.clear {
    clear: both;
}
.InsidePages_1.active {
    .option {
        div {
            animation-name: bounceInLeft;
        }
    }
    .tfboy {
        animation-name: rollIn;
    }
    .issue{
        h2{
            animation-name: bounceInDown;
        }
    }

}
.InsidePages_1 {
    background: url("../img/evaluate.jpg") no-repeat;
    height: 100%;
    background-size: cover;
    .issue {
        width: n(560px);
        margin: 0 auto;
        text-align: center;
        padding-top: n(80px);
        position: relative;
        h2 {
            font-size: n(32px);
            color: white;
            text-shadow: 0 0 10px #459cf9,0 0 30px #459cf9,0 0 40px #459cf9,0 0 70px #459cf9,0 0 80px #459cf9,0 0 100px #459cf9,0 0 150px #459cf9;
        }
        .tfboy {
            width: n(250px);
            margin: n(42px) auto 0;
            img {
                width: 100%;
            }
        }
        .cloud_1 {
            width: n(110px);
            position: absolute;
            bottom: -20px;
            animation-name: hinge;
            animation-duration: 7s;
            animation-iteration-count: infinite;
            img {
                width: 100%;
            }
        }
        .cloud_2 {
            width: n(64px);
            position: absolute;
            bottom: -5px;
            right: 45px;
            animation-name: zoomInDown;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            img {
                width: 100%;
            }
        }
        .cloud_3 {
            width: n(76px);
            position: absolute;
            bottom: 5px;
            right: -30px;
            animation-name: bounceInLeft;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            img {
                width: 100%;
            }
        }
    }
    .op {
        width: n(600px);
        margin: 0 auto;
        .option {
            width: n(370px);
            display: inline-block;
            margin-top: n(30px);
            margin-left: n(20px);
            div {
                width: 100%;
                height: 30px;
                margin: 10px 0;
                background: url("../img/InsidePages_31.png") no-repeat;
                background-size: 100%;
                line-height: n(50px);
                padding-left: n(20px);
            }
        }
        .note {
            display: inline-block;
            position: relative;
            width: n(200px);
            margin-left: n(-40px);
            .photo {
                width: n(90px);
                position: absolute;
                bottom: n(-80px);
                left: n(60px);
                animation-name: bounce;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .note_1 {
                width: n(70px);
                position: absolute;
                bottom: n(140px);
                right: n(-20px);
                animation-name: rubberBand;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .note_2 {
                width: n(46px);
                position: absolute;
                bottom: n(90px);
                right: n(-30px);
                animation-name: rubberBand;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .note_3 {
                width: n(46px);
                position: absolute;
                bottom: n(40px);
                right: n(-16px);
                animation-name: rubberBand;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .note_4 {
                width: n(46px);
                position: absolute;
                bottom: n(-10px);
                right: 0;
                animation-name: rubberBand;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .note_5 {
                width: n(40px);
                position: absolute;
                top: 0px;
                right: n(-10px);
                animation-name: rubberBand;
//              无限重复
                animation-iteration-count: infinite; 
                img {
                    width: 100%;
                }
            }
        }
    }
}
//  .option div {
//      width: 60%;
//      height: 30px;
//      margin: 10px 0;
//      background: url("../img/InsidePages_31.png") no-repeat;
//      background-size: 100%;
//  }
//  .option div:active {
//      background: url("../img/Selectbg.png") no-repeat;
//      background-size: 100%;
//  }
